<template>
    <div class="container">
        <div class="about">
            <div id="editorElem"></div>
            <div class="submit">
                <el-button type="primary" @click="onSubmit">提交</el-button>
            </div>
        </div>
        <div class="myUpload">
            <img :src="src" class="img"/>
            <el-upload
                    class="upload-demo upload"
                    :action="action"
                    :on-change="fileUploadChange"
                    :file-list="fileList"
                    :auto-upload="false"
                    :on-success="fileUploadSuccess"
                    :on-remove="fileRemove"
                    ref="upload">
                <el-button type="primary" slot="trigger" @click="fileList=[]" style="margin-left:5px;">
                    选择文件
                </el-button>
                <el-button type="success" @click="submitfiles" :disabled="subDisabled"
                           style="margin-left:20px;">
                    上传图片
                </el-button>
            </el-upload>
        </div>
    </div>
</template>
<script>
    import Editor from "wangeditor";

    export default {
        data() {
            return {
                editor: {},
                about: '',
                list: {},
                action: PATH + 'Website/aboutImg',
                fileList: [],
                subDisabled: true,
                src: '',
            };
        },
        created() {
            this.getAbout();
        },
        mounted() {
            // 富文本编辑框
            this.editor = new Editor("#editorElem");
            this.editor.customConfig.uploadImgServer = PATH + "System/upload";
            this.editor.customConfig.uploadFileName = "file[]";
            this.editor.customConfig.customAlert = function (info) {
                this.$message.error("图片上传失败！");
            };
            this.editor.create();
            this.editor.$textContainerElem[0].style.height = "600px";
        },
        methods: {
            getAbout() {
                this.apiPost('Website/about').then(res => {
                    this.editor.txt.html(res.about);
                    this.src = res.about_img;
                })
            },

            onSubmit() {
                let data = {
                    about: this.editor.txt.html(),
                };
                this.apiPost('Website/infoEdit', data).then(res => {
                    let remind = res.error ? 'error' : 'success';
                    _g.toastMsg(remind, res.msg);
                    if (!res.error) {
                        this.getAbout()
                    }
                })
            },
            /* 图片上传 */
            fileUploadChange(file, fileList) {
                if (fileList.length > 1) {
                    _g.toastMsg('warning', '每次限上传一个文件')
                }
                this.subDisabled = fileList.length !== 1;
            },
            fileRemove(file, fileList) {
                this.subDisabled = fileList.length !== 1;
            },
            fileUploadSuccess(res) {
                _g.closeGlobalLoading();
                let remind = res.error ? 'error' : 'success';
                _g.toastMsg(remind, res.msg);
                if (!res.error) {
                    this.fileList = [];
                    this.getAbout();
                } else {
                    return
                }
            },
            submitfiles() {
                this.$refs.upload.submit();
                this.popShow = false;
            },
        }
    };
</script>
<style lang="css" scoped>
    .container {
        display: flex;
        box-sizing: border-box;
        width: 100%;
        background: #ffffff;
        min-height: 100%;
        font-size: 14px;
        overflow: hidden;
    }

    .about {
        width: 65%;
    }

    #editorElem {
        width: 90%;
        margin: 50px auto;
    }

    .submit {
        text-align: center;
        margin-top: 50px;
    }

    .myUpload {
        padding-top: 50px;
        width: 30%;
    }

    .upload {
        text-align: center;
        margin-top: 50px;
    }

    .img {
        width: 500px;
    }
</style>